<template>
  <div class="cinema_detail">
    <header class="cdetail_header">
      <div>
        <h4>{{cinemaData.cinemaName}}</h4>
        <p>{{cinemaData.address}}</p>
      </div>
    </header>
    <div class="cdetail_new">
      <span>新人专享</span>
      <span>新人特惠，名额有限抢完为止</span>
      <span class="fr">></span>
    </div>
    <div class="cdetail_film">
      <div class="film_img">
        <film :lists="filmLists"></film>
      </div>
      <div class="film_name">
        <p>{{selFilm.showName}}</p>
        <span class="star">
          <img src="../assets/images/star.svg" alt />
        </span>
        <span class="film_remark">{{selFilm.remark}}</span>
      </div>
      <div class="film_date container pr">
        <ul class="clearfix" @click='selectDateTab'>
          <li class="fl" :data-num="item.num" v-for="item in palyDate" :key="item.id">
            <span :data-num="item.num">{{item.date}}</span>
            <span :data-num="item.num">惠</span>
          </li>
        </ul>
        <span class="click_date pa" :style="{left: `${105*selDateNum}px`}"></span>
      </div>
      <div class="film_tips">
        <p>温馨提示:开场前15分钟关闭在线售票</p>
      </div>
    </div>

    <playDate :selDateNum='selDateNum'></playDate>
  </div>
</template>

<script>
import film from "../components/CinemaDetail/film";
import { mapMutations } from "vuex";
import playDate from "../components/CinemaDetail/playDate";
export default {
  data() {
    return {
      cDetailList: [],
      cinemaData: {},
      filmLists: [],
      selFilm: {},
      selDateNum: 0,
      itemId: 0,
      palyDate: [
        { date: "今天 12-15", num: 0 },
        { date: "明天 12-16", num: 1 },
        { date: "后天 12-17", num: 2 },
        { date: "周五 12-18", num: 3 }
      ]
    };
  },
  watch: {
    itemId() {
      this.selFilm=this.getDataById(this.filmLists,this.itemId)
    }
  },
  mounted() {
    this.pushLoadStack()
    this.$axios.get("/movie/cinema_detail").then(res => {
      let data = res.data.data.data;
      this.filmLists = data.returnValue.shows;
      this.selFilm = this.filmLists[0];
    }).then(this.completeLoad)
    this.cinemaData=this.getDataById(this.$store.state.area,this.$route.params.id)
    if(!this.cinemaData){
      this.$router.push('/')
    }
  },
  components: {
    film,
    playDate
  },
  methods: {
    ...mapMutations([
      "pushLoadStack",
      "completeLoad",
      "showCityList",
      "updateAreaData"
    ]),
    getDataById(array,id){
      for(let i=0;i<array.length;i++){
        if(array[i].id==id){
          return array[i]
        }
      }
      return false
    },
    selectDateTab(event){
      let num=+event.target.getAttribute('data-num')
      this.selDateNum=num
    }
  }
};
</script>

<style>
.cinema_detail {
  background-color: #fff;
}
.cdetail_header {
  padding: 15px 0 0 15px;
}
.cdetail_header div {
  padding-bottom: 15px;
  border-bottom: 1px solid #d9d9d9;
}
.cdetail_header h4 {
  font-weight: 700;
  margin-bottom: 5px;
}
.cdetail_header p {
  font-size: 12px;
  color: #666;
}
.cdetail_new {
  padding: 15px;
}
.cdetail_new span {
  font-size: 12px;
  color: #666;
}
.cdetail_new span:nth-child(1) {
  background-color: #ff8625;
  border: 1px solid #ff8625;
  border-radius: 2px;
  color: #fff;
}
.cdetail_new span:nth-child(3) {
  font-size: 16px;
  color: #999;
  transform: scaleY(1.3);
  line-height: 15px;
}

.cdetail_film {
  padding-top: 30px;
  background-color: #4685a4;
  overflow: hidden;
}
.cdetail_film .film_name {
  text-align: center;
  background-color: #fff;
  padding: 5px 0;
}
.cdetail_film .film_name p {
  font-weight: 700;
}
.cdetail_film .film_date {
  width: 100%;
  background-color: #fff;
  overflow-x: auto;
}
.container::-webkit-scrollbar {
  display: none;
}
.cdetail_film .film_date ul {
  width: 420px;
}
.cdetail_film .film_date li {
  font-size: 14px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #555;
  padding-left: 5px;
}
.click_date {
  display: inline-block;
  bottom: 0px;
  width: 100px;
  border-bottom: 3px solid #ff4d64;
}
.film_tips {
  padding: 5px 15px;
  font-size: 12px;
  background-color: #fbf9e4;
  color: #ffa101;
  border-top: 1px solid #fbeccd;
  border-bottom: 1px solid #fbeccd;
}

.film_name .star img {
  width: 70px;
  vertical-align: middle;
}
.film_remark {
  font-size: 14px;
  color: #9c9c9c;
}
</style>
